/*
 * Copyright 2014-2020 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <div>
    <el-form ref="rulePasswordForm" :model="rulePasswordForm" status-icon :rules="rules2" label-width="135px" class="demo-ruleForm">
      <el-form-item :label="$t('main.oldPassword')" prop="oldPass">
        <el-input v-model="rulePasswordForm.oldPass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item :label="$t('main.newPassword')" prop="pass">
        <el-input v-model="rulePasswordForm.pass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item :label="$t('main.confirmPassword')" prop="checkPass">
        <el-input v-model="rulePasswordForm.checkPass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('rulePasswordForm')">{{ $t('main.submit') }}</el-button>
        <el-button @click="resetForm('rulePasswordForm')">{{ $t('main.reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const sha256 = require('js-sha256').sha256
import { resetPassword } from '@/api/exercises'
export default {
  name: 'ChangePasswordDialog',
  props: {},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('main.inputPassword')))
      } else {
        if (this.rulePasswordForm.checkPass !== '') {
          this.$refs.rulePasswordForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('main.againPassword')))
      } else if (value !== this.rulePasswordForm.pass) {
        callback(new Error(this.$t('main.passwordError')))
      } else {
        callback()
      }
    }
    return {
      rulePasswordForm: {
        oldPass: '',
        pass: '',
        checkPass: ''
      },
      rules2: {
        oldPass: [
          {
            required: true,
            message: this.$t('main.inputOldPassword'),
            trigger: 'blur'
          },
          {
            min: 6,
            max: 12,
            message: this.$t('main.longPassword'),
            trigger: 'blur'
          }
        ],
        pass: [
          {
            required: true,
            validator: validatePass,
            trigger: 'blur'
          },
          {
            min: 6,
            max: 12,
            message: this.$t('main.longPassword'),
            trigger: 'blur'
          },
          {
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,12}$/,
            message: this.$t('main.passwordPattern'),
            trigger: 'blur'
          }
        ],
        checkPass: [
          {
            required: true,
            validator: validatePass2,
            trigger: 'blur'
          },
          {
            min: 6,
            max: 12,
            message: this.$t('main.longPassword'),
            trigger: 'blur'
          }
        ]
      },
      account: localStorage.getItem('user')
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getResetPassword()
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getResetPassword() {
      const reqData = {
        oldAccountPwd: sha256(this.rulePasswordForm.oldPass),
        newAccountPwd: sha256(this.rulePasswordForm.pass)
      }
      resetPassword(reqData, {})
        .then(res => {
          this.loading = false
          if (res.code === 0) {
            this.$messageOnce({
              type: 'success',
              message: this.$t('main.updatePsdSuccess')
            })
            this.rulePasswordForm = {
              oldPass: '',
              pass: '',
              checkPass: ''
            }
            this.$emit('success', true)
            this.accountStatus = '2'
            sessionStorage.setItem('accountStatus', '2')
          } else {
            this.$messageOnce({
              type: 'error',
              message: this.$chooseLang(res.code)
            })
          }
        })
        .catch(err => {
          this.$messageOnce({
            type: 'error',
            message: err.data || this.$t('text.systemError')
          })
        })
    }
  }
}
</script>

<style>
</style>
